<script setup lang="ts">
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

const s = ref('')
const j = computed(() => {
    if (s.value) {
        try {
            return JSON.parse(s.value)
        } catch (e) {
            return e
        }
    }
    return ''
})
</script>

<template>
    <div class="container">
        <textarea type="text" v-model="s" placeholder="请输入JSON数据..."></textarea>
        <vue-json-pretty :data="j" class="shower" />
    </div>
</template>

<style scoped>
    .container {
        width: 100%;
        height: 70vh;
        background-color: #fff;
        border: 1px solid #aeb234;
        border-radius: 10px;
        box-shadow: 0 0 20px #aeb234;
    }
    textarea {
        float: left;
        width: 50%;
        height: 100%;
        background-color: #fff;
        border: 0;
        border-right: 1px solid #aeb234;
        border-radius: 10px 0 0 10px;
        outline: none;
        resize: none;
        /* 防止height: 100% 超出div */
        box-sizing: border-box;
        vertical-align: auto;
        padding: 25px;
    }
    .shower {
        float: left;
        width: 45%;
        height: 90%;
        padding: 20px;
        color: purple;
        overflow: scroll;
    }
</style>